<template>
	<view class="pick-subtitles" @tap.stop="">
		<view class="main-tabbar">
			<!-- <view :class="['tabbar-item',pageTabbarAc == item.id?'ac':'']" v-for="(item,index) in pageTabbarList"
				@click="changePageTabbarAc({item,index})" :key="index">
				<view class="text">{{item.text}}</view>
			</view> -->
			<!-- <view :class="['tabbar-item']">
				<view class="text">{{pageTabbarList[pageTabbarAc].text}}</view>
			</view> -->
			<!-- <view :class="['tabbar-item']">
				<view class="text">{{pageTabbarList.find(item=>pageTabbarAc==item.id).text}}</view>
			</view> -->
			<view class="finish" v-if="pageTabbarAc == 0">
				<svg t="1706783657474" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="4233" width="200" height="200">
					<path d="M847.329 255.653l42.426 42.426-475.176 475.176-42.426-42.427z" fill="#FFF" p-id="4234">
					</path>
					<path d="M74 514.426L116.426 472l299.107 299.106-42.427 42.427z" fill="#FFF" p-id="4235"></path>
				</svg>
			</view>
		</view>
		<view class="page1" v-if="pageTabbarAc == 0 && 0">
			<view class="main-content">
				<view class="kuang" v-if="tabbarAc == 1">
					<input class="ipt" type="text" ref="kuangIptText" @input="changeValue" @blur="blurValue"
						@focus="fontStyleListInd == 3" />
				</view>
			</view>
		</view>
		<view class="page2" v-if="(pageTabbarAc == 1) && 0">
			<view class="main-edit">
				<view class="btns">
					<view class="btn-item" @tap="del()">
						<image class="icon" :src="imgPath+'createAvatar/del.svg'" mode=""></image>
						<view class="text">删除</view>
					</view>
					<view class="btn-item" @tap="changeZIndex(1)">
						<image class="icon" :src="imgPath+'createAvatar/up.svg'" mode=""></image>
						<view class="text">层级上移</view>
					</view>
					<view class="btn-item" @tap="changeZIndex(-1)">
						<image class="icon" :src="imgPath+'createAvatar/up.svg'" mode=""
							style="transform: rotate(180deg);"></image>
						<view class="text">层级下移</view>
					</view>
				</view>
			</view>
			<view class="textStyle">
				<view class="textStyle-item">
					<view class="label">字体</view>
					<view class="r-c picker-box">
						<picker class="picker" @change="changeFont" :value="fontListInd" :range="fontList"
							range-key="fontName">
							<view class="uni-input">{{fontList[fontListInd]?fontList[fontListInd].fontName:''}}</view>
						</picker>
						<view class="arrow">
							<image :class="['icon']" :src="imgPath+'/createAvatar/arrow.svg'" mode=""></image>
						</view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字号</view>
					<!-- <view class="r-c input-box">
						<input type="number" v-model="fontsize" @input="changeFontsize" />
					</view> -->
					<view class="r-c slider-box">
						<slider :value="fontsize" @changes="changeFontsize" @changing="changeFontsize" min="1" max="100"
							show-value />
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">对齐</view>
					<view class="r-c btns-box">
						<view :class="['btn-item',textAlignListAc == index?'ac':'']"
							@tap="changeTextAlignListAc(item,index)" v-for="(item,index) in textAlignList" :key="index">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字体颜色</view>
					<view class="r-c color-show" @click="open('fontColor')">
						<view class="box"></view>
						<view class="box"
							:style="{background: 'rgba(' + fontColor_rgba.r + ',' + fontColor_rgba.g + ',' + fontColor_rgba.b + ',' + fontColor_rgba.a + ')' }">
						</view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字体填充</view>
					<view class="r-c color-show" @click="open('fontBgColor')">
						<view class="box"></view>
						<view class="box"
							:style="{background: 'rgba(' + fontBgColor_rgba.r + ',' + fontBgColor_rgba.g + ',' + fontBgColor_rgba.b + ',' + fontBgColor_rgba.a + ')' }">
						</view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">字体描边</view>
					<view class="r-c color-show" @click="open('fontLineColor')">
						<view class="box"></view>
						<view class="box"
							:style="{background: 'rgba(' + fontLineColor_rgba.r + ',' + fontLineColor_rgba.g + ',' + fontLineColor_rgba.b + ',' + fontLineColor_rgba.a + ')' }">
						</view>
					</view>
				</view>
				<view class="textStyle-item">
					<view class="label">描边大小</view>
					<!-- <view class="r-c slider-box">
						<slider :value="fontLineSize" @change="changeFontLineSize" min="0" max="10" show-value />
					</view> -->
					<view class="r-c input-box">
						<input type="number" v-model="fontLineSize" @input="changeFontLineSize" />
					</view>
				</view>
			</view>
		</view>
		<view class="page3" v-if="pageTabbarAc == 1 || 1">
			<view class="page3-tabbar">
				<view class="list">
					<view class="item" v-for="(item,index) in fontStyleList" :key="index">
						<image class="icon" :src="imgPath+'index/'+item.icon+(index==fontStyleListInd?'-ac':'')+'.svg'"
							mode="widthFix" @tap="changeFontStyleListInd(item,index)">
						</image>
					</view>
				</view>
				<image class="finish" :src="imgPath+'index/dui.svg'" mode="widthFix" @tap="confirm"></image>
			</view>
			<view class="page3-1" v-if="fontStyleListInd == 0">
				<view class="textStyle-item-1">
					<view class="label">字号</view>
					<view class="r-c slider-box">
						<slider activeColor="rgba(243, 173, 51, 1)" backgroundColor="rgba(204, 204, 204, 1)"
							block-color="rgba(0, 153, 127, 1)" block-size="16" :value="fontsize"
							@changes="changeFontsize" @changing="changeFontsize" min="1" max="100" show-value />
					</view>
				</view>
				<view class="textStyle-item-1">
					<view class="label">对齐</view>
					<view class="r-c slider-box">
						<view class="r-c btns-box">
							<view :class="['btn-item',textAlignListAc == index?'ac':'']" :key="index"
								@tap="changeTextAlignListAc(item,index)" v-for="(item,index) in textAlignList">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
				<view class="textStyle-item-2">
					<view class="label">字体</view>
					<view class="fontList">
						<view :class="['item',fontListInd == index?'ac':'']" v-for="(item,index) in fontList"
							:key="item.id" @tap="changeFont(index)">
							<view class="text" :style="{fontFamily:item.fontName}">
								{{item.fontName}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="page3-2" v-if="fontStyleListInd == 1">
				<view class="top">
					<view class="top-title">模板</view>
				</view>
				<view class="template-list">
					<view :class="['item',templateListInd == -1?'ac':'']" @tap="templateListInd = -1">
						<image class="none" :src="imgPath+'index/none.svg'" mode="widthFix"></image>
					</view>
					<view :style="{'color':item.fontColor,'text-stroke':'0.5px '+item.fontLineColor}"
						:class="['item',templateListInd == index?'ac':'']" v-for="(item,index) in templateList"
						:key="index" @tap="pickTemplate(item,index)">
						<view class="cont" :style="{'background':item.fontBgColor}">
							TEXT
						</view>
					</view>
				</view>
			</view>
			<view class="page3-3" v-if="fontStyleListInd == 2">
				<view class="top">
					<view class="top-title">样式</view>
					<view class="top-tabbar">
						<view :class="['item',fontStyleColorListInd == index?'ac':'']"
							v-for="(item,index) in fontStyleColorList" :key="index"
							@tap="changeFontStyleColorListInd(item,index)">{{ item.text }}
						</view>
					</view>
				</view>
				<view class="color-list">
					<view class="item" v-for="(item,index) in textColorList" :key="index"
						:style="{border:textColorInd==index?'2px solid '+ item.color:''}"
						@tap="changeTextColorInd(item,index)">
						<view class="item-color" :style="{'background': item.color}">
							<image class="dui" v-show="textColorInd==index" :src="imgPath+'index/dui.svg'"
								mode="widthFix">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<t-color-picker ref="colorPicker" :color="fontColor" @confirm="fontColorConfirm"></t-color-picker>
	</view>
</template>

<script>
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue';
	import * as api from '@/api/createVideo.js';
	import {
		textColorList,
		templateList
	} from './data.js';
	import {
		tools
	} from '../../../../utils/util';
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			promiseRes: {
				type: Object | Function,
				default () {
					return null
				}
			},
			currInd: {
				type: Number,
				default: -1
			},
			scene2: {
				type: Array,
				default () {
					return []
				}
			},
			pageItem: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				imgPath: tools.imgPath,
				value: '',
				fontListInd: 0,
				fontList: [],
				pageTabbarAc: 0,
				pageTabbarList: [],
				tabbarAc: 1,
				tabbarList: [],
				contentList: [],
				textAlignListAc: null,
				textAlignList: [],
				fontsize: 20,
				fontColorField: '',
				fontColor: {
					r: 0,
					g: 0,
					b: 0,
					a: 1
				},
				fontColor_rgba: {
					r: 255,
					g: 0,
					b: 0,
					a: 1
				},
				fontBgColor_rgba: {
					r: 0,
					g: 255,
					b: 0,
					a: 1
				},
				fontLineColor_rgba: {
					r: 0,
					g: 0,
					b: 255,
					a: 1
				},
				fontLineSize: 1,
				autoFocus: false,
				fontStyleListInd: 0,
				fontStyleList: [{
					text: '字体',
					icon: 'ftext',
				}, {
					text: '模板',
					icon: 'ftemplate',
				}, {
					text: '样式',
					icon: 'fstyle',
				}],
				fontStyleColorListInd: 0,
				fontStyleColorList: [{
					text: '文本',
					field: 'fontColor',
				}, {
					text: '描边',
					field: 'fontLineColor',
				}, {
					text: '填充',
					field: 'fontBgColor',
				}],
				textColorInd: 0,
				textColorList: [],
				templateListInd: -1,
				templateList,
			}
		},
		async created() {
			this.initPageTabbarList();
			this.initTabbarList();
			this.initTextAlignList();
			this.initTextColorList();
			let next = await this.initGetData();
			if (this.promiseRes) {
				this.promiseRes(true);
			};
		},
		methods: {
			// 确定
			confirm(){
				this.$emit('close');
			},
			// 修改文字样式颜色
			changeTextColorInd(item, index) {
				this.textColorInd = index;
				let color = this.textColorList[this.textColorInd].color;
				let str = color.toLocaleLowerCase().replace(/(rgba)|(rgb)/, '');
				let arr = str.slice(1, -1).split(",");
				this.fontColorField = this.fontStyleColorList[this.fontStyleColorListInd].field;
				this.fontColorConfirm({
					rgba: {
						r: arr[0],
						g: arr[1],
						b: arr[2],
						a: arr[3]
					}
				});
			},
			// 修改文字样式颜色TabbarAc
			changeFontStyleColorListInd(item, index) {
				this.fontStyleColorListInd = index;
				let colorObj = this[`${this.fontStyleColorList[index].field}_rgba`];
				this.textColorInd = this.textColorList.findIndex(e => {
					return e.color == `rgba(${+colorObj.r}, ${+colorObj.g}, ${+colorObj.b}, ${+colorObj.a})`;
				});
			},
			// 修改page3tabbar
			changeFontStyleListInd(item, index) {
				if (item.text == '编辑') {
					this.autoFocus = true;
					// this.$emit('changeFont', {
					// 	currInd: this.currInd,
					// 	type: 'changeFontContent'
					// });
					// return;
				} else {
					if (this.fontStyleListInd == 3) {
						this.$emit('changeMyDH', 42, 15);
					};
					this.autoFocus = false;
				};
				this.fontStyleListInd = index;
			},
			// 选择字体模板
			pickTemplate(item, index) {
				this.templateListInd = index;
				let obj = this.templateList[this.templateListInd];
				for (let key in obj) {
					let color = obj[key];
					let str = color.toLocaleLowerCase().replace(/(rgba)|(rgb)/, '');
					let arr = str.slice(1, -1).split(",");
					this.fontColorField = key;
					this.fontColorConfirm({
						rgba: {
							r: arr[0],
							g: arr[1],
							b: arr[2],
							a: arr[3]
						}
					});
				};
			},
			//修改字体描边大小
			changeFontLineSize(event) {
				this.$emit('changeFont', {
					currInd: this.currInd,
					item: event.detail.value,
					type: 'changeFontLineSize'
				});
			},
			//打开字体颜色选择器
			open(field) {
				this.fontColor = JSON.parse(JSON.stringify(this[`${field}_rgba`]));
				// console.log(this.fontColor);
				this.fontColorField = field;
				this.$refs.colorPicker.open();
			},
			//选择字体颜色
			fontColorConfirm(e) {
				this[`${this.fontColorField}_rgba`] = e.rgba;
				this.$emit('changeFont', {
					currInd: this.currInd,
					item: {
						field: this.fontColorField,
						val: e.rgba
					},
					type: 'changeFontColor'
				});
			},
			//选择字体
			async changeFont(event) {
				this.fontListInd = event?.detail?.value || event;
				let fontobj = this.fontList[this.fontListInd];
				// console.log(fontobj);
				await tools.loadFont(fontobj.fontName, fontobj.fontUrl);
				this.$emit('changeFont', {
					currInd: this.currInd,
					item: fontobj,
					type: 'changeFont'
				});
			},
			// 修改字体大小
			changeFontsize(event) {
				this.$emit('changeFont', {
					currInd: this.currInd,
					item: event.detail.value,
					type: 'changeFontsize'
				});
			},
			//文字内容失焦事件
			blurValue(event) {
				this.$emit('blurValue', event.detail.value);
			},
			//文字内容聚焦事件
			focusValue(event) {
				this.$emit('focusValue', event.detail.value);
				this.fontStyleListInd = 3;
			},
			//文字内容修改
			changeValue(event) {
				this.value = event.detail.value;
				this.$emit('changeValue', event.detail.value);
			},
			//修改textAlignListAc
			changeTextAlignListAc(item, index) {
				this.textAlignListAc = index;
				this.$emit('changeFont', {
					currInd: this.currInd,
					item: this.textAlignListAc,
					type: 'changeTextAlignListAc'
				});
			},
			// 获取后端数据
			async initGetData() {
				let list = [
					this.initFontList(),
				];
				await Promise.all(list);

				// 下载所有渲染字体
				this.fontList.map(fontobj => {
					tools.loadFont(fontobj.fontName, fontobj.fontUrl);
				});
				return true;
			},
			//textAlignList初始化
			initTextAlignList() {
				this.textAlignList = [{
					text: '左对齐',
					idx: 'left',
				}, {
					text: '中间对齐',
					idx: 'center',
				}, {
					text: '右对齐',
					idx: 'right',
				}];
				this.textAlignListAc = 1;
			},
			// fontList初始化
			initFontList() {
				return api.getFont().then(res => {
					if (!res.data) return;
					this.fontList = res.data;
				});
			},
			// 文字颜色初始化
			initTextColorList() {
				this.textColorList = textColorList;
				return;
				this.textColorList = textColorList.reduce((p, e, i, s) => {
					let tempArr = p.at(-1) || [];
					if (i % 9 == 0) {
						tempArr = [];
						p.push(tempArr);
					};
					tempArr.push(e);
					return p;
				}, []);
			},
			// 初始化tabbarList
			initTabbarList() {
				this.tabbarList = [{
					text: '文本输入',
					id: 1
				}, {
					text: '样式',
					id: 2
				}];
			},
			//初始化pageTabbarList
			initPageTabbarList() {
				this.pageTabbarList = [{
					text: '文本输入',
					id: 0
				}, {
					text: '样式',
					id: 1
				}];
			},
			//切换页面类型
			changePageTabbarAc({
				item,
				index
			}) {
				if (this.pageTabbarAc != item.id) {
					this.pageTabbarAc = item.id;
				};
				if (this.fontStyleListInd == 3) {
					this.$emit('changeMyDH', 30, 0);
				} else {
					this.$emit('changeMyDH', 42);
				};
				return;
				if (this.pageTabbarAc == 0) {
					// this.$emit('changeMyDH', 32);
				} else {
					this.$emit('changeMyDH', 39);
				};
			},
			changeTabbarAc({ //切换类型
				item,
				index
			}) {
				this.tabbarAc = item.id;
			},
			pickContentItem({ //选择item
				item,
				index
			}) {
				console.log({
					item,
					index
				});
			},
			// 删除
			del() {
				this.$emit('removeEl', this.currInd);
			},
			// 修改层级
			changeZIndex(num) {
				if (this.currInd == null || this.currInd < 0) {
					return tools.easyToast('请先选择字体框!');
				} else {
					this.$emit('changeZIndex', this.currInd, num);
				};
			},
		},
		watch: {
			["pageItem.ac"](val) {
				if (val != 9) {
					this.autoFocus = false;
					return;
				};
				let index = this.pageTabbarList.findIndex(e => {
					return e.id == this.pageItem?.pageAc;
				});
				if (index == -1) return;
				if (this.pageItem?.pageAc == 1) { //样式数据初始化
					this.autoFocus = false;
					let sand = this.scene2[this.currInd].sand;
					this.fontsize = sand.fontsize;
					const colorFn = (obj, field) => obj[`${field}Val`] ? obj[`${field}Val`] : tools.hexToRgb(obj[field]);
					this.fontColor_rgba = colorFn(sand, 'primaryColour');
					this.fontBgColor_rgba = colorFn(sand, 'bgStyle');
					this.fontLineColor_rgba = colorFn(sand, 'strokeStyle');
					// console.log(this.fontColor_rgba);
					// console.log(this.fontBgColor_rgba);
					// console.log(this.fontLineColor_rgba);
					this.fontLineSize = sand.lineWidth;
					this.textAlignListAc = null;
					let fontListInd = this.fontList.findIndex(e => e.fontFile == sand.fontname);
					this.fontListInd = fontListInd;
				} else {
					this.autoFocus = true;
				};
				this.changePageTabbarAc({
					item: this.pageTabbarList[index],
					index
				});
				// this.changeFontStyleColorListInd({
				// 	item:this.fontStyleColorList.at(-1),
				// 	index:this.fontStyleColorList.length - 1
				// });
			}
		},
		components: {
			tColorPicker
		},
	}
</script>

<style lang="scss">
	.pick-subtitles {
		padding: 5vw;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100%;

		.page1 {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			height: 100%;
		}

		.main-tabbar {
			position: relative;
			display: -webkit-box;
			overflow: auto;

			.tabbar-item {
				padding: 2vw;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: flex;
				justify-content: center;
				align-items: center;

				&.ac {
					.text {
						border-bottom: 2px solid rgba(243, 173, 51, 1);
					}
				}

				.text {
					padding-bottom: 2vw;
				}
			}

			.finish {
				position: absolute;
				right: 1vw;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom: 2vw;
				box-sizing: border-box;
				--icon-size: 5vw;

				.icon {
					width: var(--icon-size);
					height: var(--icon-size);
					display: block;
				}
			}
		}

		.main-content {
			flex: 1;
			overflow: hidden;
			display: flex;

			.kuang {
				width: 100%;
				box-sizing: border-box;
				padding: 3vw 0vw;

				.ipt {
					width: 100%;
					box-sizing: border-box;
					border: 1px solid #fff;
					padding: 2vw;
					height: auto;
				}
			}
		}

		.page2 {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;

			.main-edit {
				.btns {
					display: flex;

					.btn-item {
						border: 1px solid #fff;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						min-width: 20vw;
						margin-right: 2vw;
						border-radius: 2vw;
						padding: 1vw;

						.icon {
							width: 5vw;
							height: 5vw;
							display: block;
						}
					}
				}
			}

			.textStyle {
				margin-top: 10vw;
				flex: 1;
				overflow: auto;

				.textStyle-item {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 2vw 0vw;

					.label {}

					.r-c {
						margin-left: 3vw;
						flex: 1;

						&.picker-box {
							box-sizing: border-box;
							padding: 2vw;
							background: #506768;
							color: #fff;
							border: 1px solid transparent;
							border-radius: 2vw;
							position: relative;
							display: flex;
							align-items: center;

							.picker {
								flex: 1;
							}

							.arrow {
								position: absolute;
								right: 2vw;
								width: 3vw;
								height: 3vw;

								.icon {
									width: 100%;
									height: 100%;
									display: block;
								}
							}
						}

						&.input-box {
							box-sizing: border-box;
							padding: 2vw;
							background: #506768;
							color: #fff;
							border: 1px solid transparent;
							border-radius: 2vw;

						}

						&.btns-box {
							display: flex;
							justify-content: space-around;
							align-items: center;

							.btn-item {
								padding: 2vw;
								background: #506768;
								color: #fff;
								border: 1px solid transparent;
								border-radius: 1vw;

								&.ac {
									opacity: 1;
									border-radius: 4px;
									background: rgba(0, 153, 127, 0.2);
									border: 1px solid #00997f;
								}
							}
						}

						&.color-show {
							flex: none;
							width: 30vw;
							height: 10vw;
							box-sizing: border-box;
							padding: 2vw;
							border: 1px solid transparent;
							border-radius: 2vw;
							position: relative;
							overflow: hidden;

							.box {
								position: absolute;
								left: 0vw;
								top: 0vw;
								width: 100%;
								height: 100%;
								background: rgba(80, 103, 104, 0.2);
							}
						}

						&.slider-box {}
					}
				}
			}
		}

		.page3 {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			flex: 1;

			.main-content {
				flex: none;
				overflow: initial;

				.kuang {
					padding: 0vw;
					padding-bottom: 2vw;
				}

				.kuang-box {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.ipt-box {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 2.5vw;
						background: rgba(255, 255, 255, 0.08);
						border: 1px solid rgba(0, 153, 127, 1);
						margin: 0vw;
						margin-bottom: 2vw;
						padding: 3vw 1.5vw;

						.icon {
							width: 6vw;
						}

						.ipt {
							margin-left: 2vw;
							flex: 1;
						}
					}
				}
			}

			.page3-tabbar {
				display: flex;
				justify-content: space-between;
				align-items: center;
				--icon-size: 5vw;
				margin-bottom: 6vw;

				.list {
					display: flex;
					align-items: center;

					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-right: 12vw;

						.icon {
							width: var(--icon-size);
						}
					}
				}

				.finish {
					width: var(--icon-size);
				}
			}

			.page3-1 {
				overflow: auto;

				.textStyle-item-1 {
					width: 100%;
					display: flex;
					align-items: center;

					.r-c {
						margin-left: 3vw;
						flex: 1;

						&.btns-box {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.btn-item {
								padding: 1vw 2vw;
								background: #506768;
								color: #fff;
								border: 1px solid transparent;
								border-radius: 1vw;

								&.ac {
									opacity: 1;
									border-radius: 4px;
									background: rgba(0, 153, 127, 0.2);
									border: 1px solid #00997f;
								}
							}
						}

						&.slider-box {}
					}
				}

				.textStyle-item-2 {
					.label {
						height: 10vw;
						display: flex;
						justify-content: start;
						align-items: center;
					}

					.fontList {
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-auto-rows: 8vw;
						gap: 2vw;

						.item {
							display: flex;
							justify-content: center;
							align-items: center;
							background: rgba(26, 36, 32, 1);
							border-radius: 2.5vw;

							&.ac {
								background: rgba(0, 153, 127, 0.2);
								border: 1px solid #00997f;
							}
						}
					}
				}
			}

			.page3-2 {
				overflow: auto;

				.top {
					display: flex;
					align-items: center;
					margin-bottom: 6vw;

					.top-title {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 20.27px;
						color: rgba(255, 255, 255, 1);
						margin-right: 6vw;
					}
				}

				.template-list {
					display: grid;
					grid-template-rows: repeat(3, 1fr);
					grid-template-columns: repeat(5, 1fr);
					gap: 2vw;

					.item {
						width: 16vw;
						height: 16vw;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 2.5vw;
						background: rgba(26, 36, 32, 1);

						&.ac {
							box-sizing: border-box;
							border: 1px solid rgba(0, 153, 127, 1);
						}

						.cont {
							padding: 0vw 1vw;
							font-weight: bold;
							font-size: 40rpx;
						}

						.none {
							width: 33.3%;
						}
					}
				}
			}

			.page3-3 {
				overflow: auto;

				.top {
					display: flex;
					align-items: center;
					margin-bottom: 6vw;

					.top-title {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 20.27px;
						color: rgba(255, 255, 255, 1);
						margin-right: 6vw;
					}

					.top-tabbar {
						display: flex;
						align-items: center;

						.item {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;
							// color: rgba(87, 97, 93, 1);
							color: #ffffff68;
							background: rgba(38, 51, 46, 1);
							margin-right: 6vw;
							padding: 0.6vw 2.5vw;
							border-radius: 100vw;
							box-sizing: border-box;

							&.ac {
								border: 1px solid rgba(0, 153, 127, 1);
								color: rgba(0, 153, 127, 1);
								background: rgba(0, 153, 127, 0.1);
							}
						}
					}
				}

				.color-list {
					--item-size: 8vw;
					display: grid;
					grid-template-rows: repeat(5, 1fr);
					grid-template-columns: repeat(9, 1fr);
					gap: calc(10vw - var(--item-size));

					.item {
						width: var(--item-size);
						height: var(--item-size);
						box-sizing: border-box;
						background: transparent;
						border-radius: 50%;
						border: none;
						display: flex;
						justify-content: center;
						align-items: center;

						.item-color {
							width: 76%;
							height: 76%;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;

							.dui {
								width: 79%;
								height: 79%;
								filter: brightness(86%);

							}
						}
					}
				}
			}

		}
	}
</style>